<script setup>
  import { reactive, onMounted } from 'vue'
  import { getAdmin } from '../../api'
  import useAdmin from '../../store/admin'
  import { Memo } from '@element-plus/icons-vue'
  import * as echarts from 'echarts'
  const { admin, updateAdmin } = useAdmin()

  onMounted(() => {
    loadAdmin()
    initCharts1()
    initCharts2()
  })

  // 图表1:月度销售额
  const initCharts1 = () => {
    const myChart = echarts.init(document.getElementById('salesVolume'))
    myChart.setOption({
      color: ['#1493fa'],
      title: { text: "2023年城市旅游收益" },
      xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        name: '月份',
        axisLabel: {
          interval: 0
        },
      },
      yAxis: {
        name: '单位(千万元)',
      },
      grid: {
        left: '3%',
        right: '8%',
        bottom: '5%',
        containLabel: true,
      },
      legend: {},
      series: [
        {
          data: [6, 7, 8.5, 8, 9, 10, 13, 12, 10, 16, 15, 14],
          type: 'line',
          name: '销售额',
          smooth: true,
          label: {
            show: true,
            position: 'top',
          }
        }
      ]
    })
    // 图表自适应大小
    window.onresize = () => {
      myChart.resize()
    }
  }

  // 图表2:2023年旅游人数
  const initCharts2 = () => {
    const myChart = echarts.init(document.getElementById('orderQuantity'))
    myChart.setOption({
      title: { text: '2023年旅游人数' },
      color: ['#1493fa'],
      grid: {
        left: '3%',
        right: '8%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        name: '月份',
        // 类目轴中在boundaryGap为true的时候有效,可以保证刻度线和标签对齐
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          interval: 0,
          rotate: 45 // 设置刻度标签旋转角度为45度
        },
      },
      legend: {},
      yAxis: {
        name: '单位(万人)',
      },
      series: [
        {
          data: [400, 450, 300, 230, 250, 300, 400, 350, 160, 350, 380, 400],
          type: 'bar',
          barWidth: '60%',
          name: '旅游人数',
          label: {
            show: true,
            position: 'top',
          }
        }
      ]
    })
    // 图表自适应大小
    window.onresize = () => {
      myChart.resize()
    }
  }

  const loadAdmin = async () => {
    let data = await getAdmin()
    updateAdmin({
      username: data.username,
      avatar: data.avatar
    })
  }

  // 用户登录信息(模拟数据)
  const loginInfo = reactive({
    loginTime: getLoginTime(),
    loginPlace: '郑州'
  })

  // 获取登录时间函数
function getLoginTime() {
  const savedTime = localStorage.getItem('loginTime') // 从 localStorage 中读取已保存的时间
  if (savedTime) {
    return savedTime // 如果存在，返回保存的时间
  } else {
    const currentTime = new Date().toLocaleString() // 获取当前时间
    localStorage.setItem('loginTime', currentTime) // 存储当前时间为登录时间
    return currentTime
  }
}
</script>





<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <el-avatar class="avatar" :src="admin.avatar" shape="square" :size="40"></el-avatar>
            <span style="font-size:24px;">{{ admin.username }}</span>
          </div>
        </template>
        <div class="info">
          <p>登录时间: {{ loginInfo.loginTime }}</p>
          <p>登录地点: {{ loginInfo.loginPlace }}</p>
        </div>
      </el-card>
    </el-col>
    <!-- 单月统计信息展示 -->
    <el-col :span="18">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            6月统计信息
          </div>
        </template>
        <div class="info">
          <el-row :gutter="24">
            <!-- 景点数量 -->
            <el-col :span="8">
              <div class="card-container">
                <div class="card-left-container" style="background-color:#EEA0DE;">
                  <el-icon :size="90">
                    <Memo/>
                  </el-icon>
                </div>
                <div class="card-right-container">
                  <p class="number">500</p>
                  <p>城市数量(个)</p>
                </div>
              </div>
            </el-col>
            <!-- 景点分类数量 -->
            <el-col :span="8">
              <div class="card-container">
                <div class="card-left-container" style="background-color:#AB23FF;">
                  <el-icon :size="90">
                    <Memo/>
                  </el-icon>
                </div>
                <div class="card-right-container">
                  <p class="number">20</p>
                  <p>城市平均景点分布(个)</p>
                </div>
              </div>
            </el-col>
            <!-- 用户游览次数 -->
            <el-col :span="8">
              <div class="card-container">
                <div class="card-left-container" style="background-color:#63B8FE;">
                  <el-icon :size="90">
                    <Memo/>
                  </el-icon>
                </div>
                <div class="card-right-container">
                  <p class="number">121</p>
                  <p>用户游览次数(次)</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <!-- 图表区域 -->
  <el-row :gutter="20">
    <el-col :span="12">
      <!-- 通过折线图展示2023年月度销售额 -->
      <el-card class="box-card">
        <div id="salesVolume" style="width:auto; height:400px;"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <!-- 通过柱状图展示2023年订单数量 -->
      <el-card class="box-card">
        <div id="orderQuantity" style="width:auto; height:400px;"></div>
      </el-card>
    </el-col>
  </el-row>
</template>










<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    .box-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .info {
        font-size: 14px;
      }
    }
  }
  .card-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e4e7ed;
    text-align: center;
    padding-right: 20px;
    .card-left-container {
      color: white;
    }
    .card-right-container {
      .number {
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
</style>